<template>
	<view class="address-manage rf-row-wrapper">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input
				class="input"
				type="text"
				v-model="addressData.consignee"
				@blur="handleRealNameChange"
				placeholder="收货人姓名"
				placeholder-class="placeholder"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input
				class="input"
				type="number"
				v-model="addressData.mobile"
				@blur="handleMobileChange"
				placeholder="收货人手机号码"
				placeholder-class="placeholder"
			/>
		</view>
		<view class="row b-b">
			<text class="tit">选择地址</text>
			<view class="input" @tap="selectMap">{{addressData.province}}{{addressData.city}}{{addressData.district}}</view>
			<text class="cell-more iconfont iconyou"  @tap="selectMap"></text>
			
			<!--地址三级联动-->
			<!-- <rf-pick-regions
				:addressData="addressData"
				@getRegions="handleGetRegions"
			>
			</rf-pick-regions> -->
		</view>
		<view class="row b-b" style="height: auto;">
			<text class="tit">详细地址</text>
			<textarea 
				class="input"
				type="text"
				style="padding: 10rpx;"
				v-model="addressData.detail"
				@blur="bindAddressDetailsChange"
				placeholder="请输入详细地址"
				placeholder-class="placeholder"
			/>
		</view>
		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch
				:checked="addressData.is_default ? true : false"
				:color="themeColor.color"
				@change="switchChange"
			/>
		</view>
		<button
			class="add-btn"
			:class="'bg-' + themeColor.name"
			:disabled="btnLoading"
			:loading="btnLoading"
			@tap="confirm"
		>
			提交
		</button>

		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>
	</view>
</template>

<script>
/**
 * @des 收货地址列表
 *
 * @author stav stavyan@qq.com
 * @date 2020-03-10 18:00
 * @copyright 2019
 */
import { addressCreate, addressUpdate, addressDetail } from '@/api/userInfo';
import rfPickRegions from '@/components/rf-pick-regions';
export default {
	components: {
		rfPickRegions
	},
	data() {
		return {
			addressData: {
				consignee: '',
				mobile: '',
				detail: '',
				province:'',
				city:'',
				district:'',
				is_default: false,
				longitude: '',
				latitude: '',
			},
			btnLoading: false,
			multiArray: [[], [], []],
			multiIndex: [0, 0, 0],
			loading: true
		};
	},
	onLoad(options) {
		this.initData(options);
		this.selectCity()
	},
	methods: {
		// 获取省市区
		selectCity(res){
			uni.getLocation({
				geocode: true,
			    type: 'gcj02',
			    success: (r)=> {
					if(r.address){
						this.addressData.province = r.address.province
						this.addressData.city = r.address.city
						this.addressData.district = r.address.district
						if(res){
							console.log(res)
							this.addressData.longitude = res.longitude
							this.addressData.latitude = res.latitude
							this.addressData.detail = res.address + (res.name == '地图位置' ? '' :  res.name)
						}
					}
			    }
			});
		},
		// 地址选择
		selectMap() {
			uni.chooseLocation({
			    success: (res)=> {
					this.selectCity(res)
			    }
			});
		},
		// 获取选择的地区
		handleGetRegions(e) {
			this.addressData.province_id = e.province_id;
			this.addressData.city_id = e.city_id;
			this.addressData.area_id = e.area_id;
		},
		// 数据初始化
		async initData(options) {
			let title = '新增收货地址';
			if (options.type === 'edit') {
				title = '编辑收货地址';
				this.getAddressDetail(JSON.parse(options.item));
			} else {
				setTimeout(() => {
					this.loading = false;
				}, 1 * 1000);
			}
			this.manageType = options.type;
			uni.setNavigationBarTitle({
				title
			});
		},
		// 获取收货地址
		getAddressDetail(data) {
			console.log(data)
			this.addressData = data
			setTimeout(() => {
				this.loading = false;
			}, 1 * 1000);
		},
		//收货人姓名
		handleRealNameChange(e) {
			this.addressData.consignee = e.detail.value;
		},
		//请输入详细地址
		bindAddressDetailsChange(e) {
			this.addressData.detail = e.detail.value;
		},
		//收货人手机号码
		handleMobileChange(e) {
			this.addressData.mobile = e.detail.value;
		},
		//设置默认
		switchChange(e) {
			this.addressData.is_default = e.detail.value;
		},
		// 提交
		confirm() {
			let data = this.addressData;
			if (!data.consignee) {
				this.$mHelper.toast('请填写收货人姓名');
				return;
			}
			if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(data.mobile)) {
				this.$mHelper.toast('请输入正确的手机号码');
				return;
			}
			if (!data.province) {
				this.$mHelper.toast('请选择收货地址');
				return;
			}
			if (!data.detail) {
				this.$mHelper.toast('请填写详细地址');
				return;
			}
			this.btnLoading = true;
			if (this.manageType === 'edit') {
				this.handleAddressUpdate(data);
			} else {
				this.handleAddressCreate(data);
			}
		},
		async handleAddressUpdate(data) {
			console.log(data)
			await this.$http
				.post(`${addressUpdate}`, {
					address_id:data.address_id,
					consignee: data.consignee,
					mobile: data.mobile,
					is_default: data.is_default ? 1 : 0,
					province: data.province,
					city: data.city,
					district: data.district,
					detail: data.detail,
					longitude: data.longitude,
					latitude: data.latitude,
				})
				.then(() => {
					this.btnLoading = false;
					this.$mHelper.toast('收货地址修改成功！');
					setTimeout(()=>{
						this.$mRouter.back();
					},1000)
				})
				.catch(() => {
					this.btnLoading = false;
				});
		},
		async handleAddressCreate(data) {
			console.log(data)
			await this.$http
				.post(`${addressCreate}`, {
					consignee: data.consignee,
					mobile: data.mobile,
					is_default: data.is_default ? 1 : 0,
					province: data.province,
					city: data.city,
					district: data.district,
					detail: data.detail,
					longitude: data.longitude,
					latitude: data.latitude,
				})
				.then(() => {
					this.btnLoading = false;
					this.$mHelper.toast('收货地址添加成功！');
					setTimeout(()=>{
						this.$mRouter.back();
					},1000)
				})
				.catch(() => {
					this.btnLoading = false;
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
}
.address-manage {
	padding-top: 16upx;
}
</style>
